<ui:composition template="template.xhtml"
                xmlns="http://www.w3.org/1999/xhtml"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:icecore="http://www.icefaces.org/icefaces/core"
                xmlns:ace="http://www.icefaces.org/icefaces/components"
                xmlns:ice="http://www.icesoft.com/icefaces/component"
                xmlns:f="http://java.sun.com/jsf/core">
    <ui:define name="body_content">
        
        <img src="img/appbar.base.arrow.png" alt="ir atras" class="nav-back" onclick="history.go(-1)" />
        <h3 class="header-bg" style="text-align: center">Sistema de Información Vehicular | Reservación general</h3>
        <!--Info general-->
        <h:form>
            <!--Ace tabs-->
            <ace:tabSet  clientSide="true" styleClass="panel-tabs">
                <ace:tabPane id="panelVisita" label="Paso 1.Información general" styleClass="no-margin-top" >
                    <!--Ace tabs-->
                
                    <ace:panel styleClass="contenedorDatos" >
                        <h:panelGrid columns="1" width="100%" >
                            <p class="titulo_panel">Por favor rellene los campos del formulario de la izquierda. Los campos marcados con (*) son requeridos..<span class="titulo_panel"></span></p>
                            <h:graphicImage class="ico-label" value="img/ico/vcard.png" alt="cedula"/>
                            <ace:textEntry id="idInput" value="#{reservacionGeneralFacadeManaged.reservacionGeneralLocal.cedula}" label="Cédula" labelPosition="left" required="true" requiredIndicator="(*)" indicatorPosition="right">
                                <ace:ajax render="@this firstNameOutput firstNameMsg"/>
                            </ace:textEntry>
                        
                            <!-- Toggle DIV via ajax call -->
                        
                            <h:graphicImage class="ico-label" value="img/ico/user.png" alt="nombre"/>
                            <ace:textEntry id="firstNameInput" value="#{reservacionGeneralFacadeManaged.reservacionGeneralLocal.nombre}" label="Nombre" labelPosition="left" required="true" requiredIndicator="(*)" indicatorPosition="right">
                                <ace:ajax render="@this firstNameOutput firstNameMsg"/>
                            </ace:textEntry>
                        
                            <ace:textEntry id="lastname1" value="#{reservacionGeneralFacadeManaged.reservacionGeneralLocal.apellido1}" label="Primer apellido" labelPosition="left" required="true" requiredIndicator="(*)" indicatorPosition="right">
                                <ace:ajax render="@this lastNameOutput lastNameMsg"/>
                            </ace:textEntry>
                        
                            <ace:textEntry id="lastname2" value="#{reservacionGeneralFacadeManaged.reservacionGeneralLocal.apellido2}" label="Segundo apellido" labelPosition="left" required="true" requiredIndicator="(*)" indicatorPosition="right">
                                <ace:ajax render="@this address1Output address1Msg"/>
                            </ace:textEntry>
                        
                        
                            <ice:selectOneMenu id="tipoVisita" value="#{reservacionGeneralFacadeManaged.reservacionGeneralLocal.tipoReservacion}">
                                <label for="tipoVisita" class="combo-lb5" >Tipo de reservacion: </label>
                                <f:selectItem id="item11" itemLabel="Visita" itemValue="1" />
                                <f:selectItem id="item12" itemLabel="Autoridad" itemValue="2" />
                                <f:selectItem id="item13" itemLabel="Otro" itemValue="3" />
                            </ice:selectOneMenu>
                            <ace:textAreaEntry id="cargo_motivo" label="Cargo o motivo" value="#{reservacionGeneralFacadeManaged.reservacionGeneralLocal.cargoMotivo}" labelPosition="left" required="true"/>
                            <ace:textEntry id="numeroEstacionamiento" label="Estacionamiento asignado" value="#{reservacionGeneralFacadeManaged.reservacionGeneralLocal.estacionamientoAsignado}" labelPosition="left" >
                            </ace:textEntry>
                            <ace:textEntry id="placaVehiculo" label="Placa del vehiculo" value="#{reservacionGeneralFacadeManaged.reservacionGeneralLocal.placa}" labelPosition="left" >
                            </ace:textEntry>
                        
                            <!--TOOLTIPS-->
                            <ace:tooltip id="tooltipNombre"
                                         for="firstNameInput"
                                         speechBubble="true"
                                         showEffect="slide"
                                         hideEffect="grow"
                                         showDelay="500"
                                         hideDelay="300"
                                         position="bottomLeft"
                                         targetPosition="topRight"
                                         showEffectLength="300"
                                         hideEffectLength="300">
                                <h:panelGrid styleClass="tooltipBoxStyle"> 
                                    <h:graphicImage  id="img0" value="#{tooltipOverviewBean.carSet[0].path}" alt="#{tooltipOverviewBean.carSet[0].description}"/>
                                    <h:outputText id="desc0" value="Nombre no debe contener números"/>
                                </h:panelGrid>   
                            </ace:tooltip>
                            <ace:tooltip id="tooltipCedula"
                                         for="idInput"
                                         speechBubble="true"
                                         showEffect="slide"
                                         hideEffect="grow"
                                         showDelay="500"
                                         hideDelay="300"
                                         position="bottomLeft"
                                         targetPosition="topRight"
                                         showEffectLength="300"
                                         hideEffectLength="300">
                                <h:panelGrid styleClass="tooltipBoxStyle"> 
                                    <h:outputText id="desc1" value="Cédula no debe tener guiones ni espacios en blanco. Ejemplo: 113630159"/>
                                </h:panelGrid>   
                            </ace:tooltip>
                            <!--TOOLTIPS generales-->
                        </h:panelGrid>
                    
                    </ace:panel>
                
                </ace:tabPane>
            
                <!--FIN INFO general-->        
            
                <!--Info Horario-->
                <ace:tabPane id="panelVisitaHorario" label="Paso 2.Registrar Horario">
                    <!-- Panel Grid Vehiculo -->
                    <h:panelGrid styleClass="centeredPanelGrid" >
                        <ace:panel id="horarioInputPanel" styleClass="contenedorDatos">
                            <p class="titulo_panel">Por favor rellene los campos del formulario de la izquierda. Los campos marcados con (*) son requeridos..<span class="titulo_panel"></span></p>
                            <h:panelGrid id="inputGrid2" columns="1" width="100%" styleClass="textEntryInputTable">
                                <h:panelGrid id="calendarPanel" width="100%" columns="2">
                                    <ace:dateTimeEntry id="fecha"
                                                       value="#{horarioReservacionGeneralFacadeManaged.horarioReservacionGeneralLocal.fecha}"
                                                       timeZone="Canada/Mountain"
                                                       pattern="dd/MM/yyyy"
                                                       renderAsPopup="true"
                                                       label="Fecha de reservación"
                                                       labelPosition="left"/>
                                    <ace:textEntry id="horasInicio" label="Hora de inicio" value="#{horarioReservacionGeneralFacadeManaged.horarioReservacionGeneralLocal.horaInicio}" labelPosition="left" > </ace:textEntry>
                                    <ace:textEntry id="horasSalida" label="Hora de salida" value="#{horarioReservacionGeneralFacadeManaged.horarioReservacionGeneralLocal.horaFin}" labelPosition="left" > </ace:textEntry>
                                    <h:commandButton id="agregarFecha2" type="button" onclick="confirmation.show()" styleClass="botonEnviarConsulta" value="Agregar Fecha" />
                                              <ace:confirmationDialog id="confirmDialogGeneral"
                                                    widgetVar="confirmation"
                                                    message="Seguro(a) que desea guardar esta información?"
                                                    header="Confirmación"
                                                    width="450"
                                                    height="200"
                                                    modal="false"
                                                    closeOnEscape="true"
                                                    closable="true"
                                                    position="center"
                                                    styleClass="dialog-margin">
                                <h:panelGrid columns="2" styleClass="centeredPanelGrid">
                                    <h:commandButton id="yes" value="Sí" onclick="confirmation.hide()" actionListener="#{horarioReservacionGeneralFacadeManaged.guardar()}"/>
                                    <h:commandButton id="no" value="No" onclick="confirmation.hide()" action="#{horarioReservacionEventoFacadeManaged.doNothing()}" />
                                </h:panelGrid>
                            </ace:confirmationDialog>   
                                </h:panelGrid>
                                <ace:panel id="PanelHorariodetalle" header="Horario">
                                    <ice:dataTable
                                        value=""
                                        var="item"
                                        width="100%">
                                        <!-- Stock number -->
                                        <ice:column>
                                            <f:facet name="header">
                                                <ice:outputText value=""/>
                                            </f:facet>
                                            <ice:outputText  style="text-align: center;" value="23"/>
                                        </ice:column>
                                        <!-- Stock number -->
                                        <ice:column>
                                            <f:facet name="header">
                                                <ice:outputText value="Dia"/>
                                            </f:facet>
                                            <ice:outputText  style="text-align: center;" value="Martes"/>
                                        </ice:column>
                                        <!-- Model number -->
                                        <ice:column>
                                            <f:facet name="header">
                                                <ice:outputText value="Mes"/>
                                            </f:facet>
                                            <ice:outputText  style="text-align: center;" value="Octubre"/>
                                        </ice:column>
                                        <!-- Stock number -->
                                        <ice:column>
                                            <f:facet name="header">
                                                <ice:outputText value="Hora de Inicio"/>
                                            </f:facet>
                                            <ice:outputText  style="text-align: center;" value="14:00"/>
                                        </ice:column>
                                        <!-- Stock number -->
                                        <ice:column>
                                            <f:facet name="header">
                                                <ice:outputText value="Hora de Salida"/>
                                            </f:facet>
                                            <ice:outputText  style="text-align: center;" value="17:00"/>
                                        </ice:column>
                                    </ice:dataTable>
                                </ace:panel> 
                      
                                <!-- Tooltips \ -->
                            </h:panelGrid>
                        </ace:panel>
                    </h:panelGrid>
                </ace:tabPane>        

            </ace:tabSet>
                
        </h:form>
  
        
         </ui:define>
</ui:composition>
